<template>
  <div>
    <dl v-for="item in list" :key="item.id" @click="toDetail(item.id)" :style="style">
      <dt>
        <img :src="item.url" alt="" />
      </dt>
      <dd>
        <h3>{{ item.title }}</h3>
        <p class="van-multi-ellipsis--l2" v-if="show">{{ item.desc }}</p>
        <p  v-if="show">
          <b>{{ item.auther }}</b>
          <b>{{ item.type }}</b>
        </p>
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  props: {
    // 渲染的列表
    list: Array,
    // 列表两种视图模式
    show: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    // 跳转详情
    toDetail(id) {
      this.$router.push(`/detail/${id}`)
    }
  },
  data() {
    return {
      // 样式 水平还是竖直
      style: { 'flex-direction': this.show ? "row": "column" }
    }
  }
}
</script>
<style scoped lang="scss">
dl {
  display: flex;
  padding: 10px;
  dt {
    width: 120px;
    img {
      width: 120px;
    }
  }

  dd {
    flex: 1;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    p:last-child {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>